<template>
	<div class="mobile_register_page mobile_layer">
		<div class="logo_box">
			<img src="@/assets/logo.png" class="logo" />
			<i class="el-icon-close" @click="handleBack()"></i>
		</div>
		<div class="h1">
			{{$t('home.resetPassword')}}
		</div>
		<div class="sw_but">
			<div class="but cur_p" :class="{active: type == 'email'}" @click="type = 'email'">{{$t('login.email')}}</div>
			<div class="but cur_p" :class="{active: type == 'phone'}" @click="type = 'phone'">{{$t('login.phonNumber')}}</div>
		</div>
		<div class="from_box">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
				<el-form-item prop="phone" v-if="type == 'phone'">
					<el-input v-model="ruleForm.phone" :placeholder="$t('login.phonNumber')">
						<div class="acc_box" slot="prepend">
							<el-select v-model="ruleForm.area_id" ref="select" filterable popper-class="area_list">
								<el-option :label="item.global_code" :value="item.id" v-for="(item,index) in areaList" :key="index">
									<!-- <img :src="item.img"
									style="width: 24px;height: 24px;margin-right: 10px;vertical-align: middle;" /> -->
									<span>{{item.global_code}}</span>
								</el-option>
							</el-select>
							<el-divider direction="vertical"></el-divider>
						</div>
					</el-input>
				</el-form-item>
				<el-form-item prop="email" v-else>
					<el-input v-model="ruleForm.email" :placeholder="$t('login.email')"></el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-input v-model="ruleForm.code" :placeholder="$t('login.verificationCode')">
						<el-button slot="append" class="down" :disabled="Boolean(dwonCodeText)" @click="handleGetSms">
							{{dwonCodeText ? dwonCodeText : codeText}} </el-button>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="ruleForm.password" :placeholder="$t('login.enenterLoginPassword')" show-password></el-input>
				</el-form-item>
				<el-form-item prop="password2">
					<el-input v-model="ruleForm.password2" :placeholder="$t('login.enenterLoginPasswordAgain')" show-password></el-input>
				</el-form-item>
				<el-button class="but" @click="handleSign()">{{$t('login.signIn')}}</el-button>
				<div class="creat_acc">
					{{$t('login.alreadyHaveAccount')}}? <span @click="handleLogin()">{{$t('login.signUp')}}</span>
				</div>
			</el-form>
		</div>
		<div class="ag_box">
			<div class="radio" :class="{active: radio}" @click="radio = !radio"></div>
			{{$t('login.IAgree')}} <span>《{{$t('login.userAgreement')}}》</span>
		</div>
	</div>
</template>

<script>
	import {
		defaultAreaList,
		notifySendSms,
		notifySendEmail,
		userForgetPassword
	} from '@/api/home'
	export default {
		props: {},
		components: {},
		data() {
			return {
				radio: false,
				type: 'email',
				loading: false,
				intimer: null,
				dwonCodeText: '',
				areaList: [], // 地区区号
				ruleForm: {
					area_id: 1,
					email: '',
					phone: '',
					password: '',
					password2: '',
				},

			}
		},
		computed: {
			codeText: {
				get() {
					return this.$t('login.receive')
				},
				set(val) {
					return val
				}
			},
			rules() {
				var validatePass2 = (rule, value, callback) => {
					if (value === '') {
						callback(new Error(this.$t('login.pleaseEnterPasswordAgain')))
					} else if (value !== this.ruleForm.password) {
						callback(new Error(this.$t('login.thePasswordNot')))
					} else {
						callback()
					}
				}
				return {
					email: [{
							required: true,
							message: this.$t('login.pleasEnterEmail'),
							trigger: 'change'
						},
						{
							type: 'email',
							message: this.$t('login.pleaseEnterCorrectEmail'),
							trigger: ['blur', 'change']
						}
					],
					phone: [{
						required: true,
						message: this.$t('login.pleaseEnterPhone'),
						trigger: 'change'
					}],
					password: [{
						required: true,
						message: this.$t('login.passwordValidate'),
						trigger: 'change'
					}],
					password2: [{
						required: true,
						validator: validatePass2,
						trigger: 'change'
					}],
					code: [{
						required: true,
						message: this.$t('login.pleaseEnterCode'),
						trigger: 'change'
					}],
				}
			},
		},
		watch: {},
		mounted() {
			this.getAreaList()
		},
		methods: {
			handleBack() {
				this.$router.go(-1)
			},
			handleLogin() {
				this.$router.replace('/mobile/login')
			},
			async getAreaList() {
				const res = await defaultAreaList()
				if (res && res.code == 1) {
					this.areaList = res.data
				}
				console.log('FFFFFFFFFFres', res);
			},
			async handleGetSms() {
				if (this.type == 'email') {
					this.$refs.ruleForm.validateField('email', async (valid) => {
						if (!valid) {
							console.log('valid::', valid);
							const res = await notifySendEmail({
								to: this.ruleForm.email,
								type: '2'
							})
							console.log('res::', res);
							if (res && res.code == 1) {
								this.downTime()
								this.$message.success(res.msg)
							} else {
								this.$message.error(res.msg)
							}
						}
					})
				} else {
					this.$refs.ruleForm.validateField('phone', async (valid) => {
						if (!valid) {
							console.log('valid::', valid);
							const res = await notifySendSms({
								area_id: this.ruleForm.area_id,
								to: this.ruleForm.phone,
								type: '2'
							})
							console.log('res::', res);
							if (res && res.code == 1) {
								this.downTime()
								this.$message.success(res.msg)
							} else {
								this.$message.error(res.msg)
							}
						}
					})
				}
			},
			downTime() {
				let time = 60
				this.codeText = '60s'
				this.intimer = setInterval(() => {
					this.dwonCodeText = (--time) + 's'
					if (time <= 0) {
						clearInterval(this.intimer)
						this.intimer = null
						this.dwonCodeText = '';
						this.codeText = this.$t('login.receive')
					}
				}, 1000)
			},
			handleSign() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						if (!this.radio) {
							this.$message('Please agree to the user agreement')
							return
						}
						const res = await userForgetPassword({
							account: this.type == 'email' ? this.ruleForm.email : this.ruleForm.phone,
							type: this.type == 'email' ? 'email' : 'mobile',
							new_password: this.ruleForm.password,
							secondary_password: this.ruleForm.password2,
							auth_code: this.ruleForm.code
						})
						if (res && res.code == 1) {
							this.$message.success(res.msg)
							this.$router.replace('/login')
						} else {
							this.$message.error(res.msg)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.mobile_register_page {
		position: relative;
		padding-top: 10px;
		background: url('~@/assets/images/login/bg.png') no-repeat;
		background-size: cover;
		background-position: left top;
		height: 100vh;

		.logo_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40px;

			.logo {
				width: 24px;
			}

			i {
				font-size: 20px;
			}
		}

		.h1 {
			font-family: PingFang SC;
			font-size: 20px;
			margin-bottom: 40px;
			text-align: left;
		}

		.sw_but {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			.but {
				width: 50%;
				height: 46px;
				line-height: 46px;
				text-align: center;
				color: #fff;
				font-size: 14px;
				color: #999;
			}

			.active {
				background: url('~@/assets/images/login/active.png') no-repeat;
				background-size: 100% 100%;
				color: #fff;
			}
		}

		.from_box {
			::v-deep .el-input {
				background-color: #12171D;
				border-radius: 10px;
				color: #fff;
			}

			::v-deep .el-input__inner {
				background-color: #12171D;
				border: 0;
				color: #fff;
			}

			::v-deep .el-input-group__prepend {
				background-color: transparent;
				border: none;
				padding-right: 0;
			}

			::v-deep .el-select {
				margin: -10px -10px;
			}

			::v-deep .el-select .el-input {
				min-width: 45px;

				.el-input__inner {
					padding-left: 0;
				}

				.el-select__caret {
					font-size: 12px;
				}
			}

			::v-deep .el-input-group__append {
				width: auto;
				background-color: transparent;
				border: 0;

				.el-button {
					width: 60px;
					height: 26px;
					padding: 5px;
					border: 0;
					background-color: #137EFE;
					color: #fff;
					font-size: 12px;
					border-radius: 6px;
				}

				.el-button.is-disabled {
					background-color: #212A36;
				}
			}

			.el-divider {
				margin-left: 10px;
				margin-right: 0;
				background-color: #353F4C !important;
			}


			.but {
				width: 100%;
				height: 46px;
				padding: 15px;
				background-color: #137EFE;
				border: 0;
				border-radius: 10px;
				color: #fff;
				font-size: 16px;
				margin-bottom: 30px;
			}

			.creat_acc {
				font-size: 14px;
				color: #999;
				text-align: center;

				span {
					color: #137EFE;
					margin-left: 5px;
				}
			}
		}

		.ag_box {
			width: 100%;
			position: fixed;
			bottom: 20px;
			left: 0;
			font-size: 14px;
			color: #999;
			display: flex;
			align-items: center;
			justify-content: center;

			.radio {
				width: 16px;
				height: 16px;
				margin-right: 5px;
				background: url('~@/assets/images/login/radio.png') no-repeat;
				background-size: 100% 100%;
			}

			.active {
				background: url('~@/assets/images/login/radio_.png') no-repeat;
				background-size: 100% 100%;
			}

			span {
				color: #fff;
			}
		}
	}
</style>
<style lang="less">
	.area_list {
		background-color: #212A36;
		border: 0;

		.popper__arrow {
			border-bottom-color: #212A36 !important;
		}

		.popper__arrow::after {
			border-bottom-color: #212A36 !important;

		}

		.el-select-dropdown__item.hover,
		.el-select-dropdown__item:hover {
			background-color: transparent;
		}
	}
</style>